<?php
/**
 * 团队展示组件
 * 用于展示公司团队成员信息
 */
$configKey = isset($configKey) ? $configKey : 'team';
// 从页面配置获取团队组件配置，使用默认值作为后备
$data = array_merge([
    'section_id' => $configKey,
    'section_pretitle' => '我们的团队',
    'section_title' => '专业的团队，卓越的服务',
    'section_subtitle' => '认识我们的核心团队成员，他们拥有丰富的经验和专业知识，致力于为客户创造价值',
    'layout' => 'grid', // grid 或 carousel
    'columns' => '4', // 1-4列（网格布局时有效）
    'bg_color' => 'white',
    'card_style' => 'modern', // modern, classic, minimal
    'avatar_shape' => 'rounded-xl', // rounded-xl, rounded-full, square
    'show_bio' => true,
    'show_social' => true,
    'show_all_link' => true,
    'all_link_text' => '查看全部团队成员',
    'all_link_url' => '/team.php',
    'members' => []
], $pageConfig['components'][$configKey] ?? []);

// 处理布局和样式类
$columnClasses = [
    '1' => 'grid-cols-1',
    '2' => 'grid-cols-1 sm:grid-cols-2',
    '3' => 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
    '4' => 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4'
];
$columnClass = $columnClasses[$data['columns']] ?? $columnClasses['4'];

// 头像形状样式
$avatarShapes = [
    'rounded-xl' => 'rounded-xl',
    'rounded-full' => 'rounded-full',
    'square' => 'rounded-none'
];
$avatarShapeClass = $avatarShapes[$data['avatar_shape']] ?? $avatarShapes['rounded-xl'];

// 卡片样式处理
$cardStyles = [
    'modern' => 'bg-white shadow-sm hover:shadow-lg transition-all duration-300',
    'classic' => 'bg-white border border-gray-100 hover:border-primary/30 transition-all duration-300',
    'minimal' => 'bg-transparent hover:bg-gray-50 transition-all duration-300'
];
$cardClass = $cardStyles[$data['card_style']] ?? $cardStyles['modern'];
?>

<!-- 团队展示区域 -->
<section class="py-20 bg-<?php echo $data['bg_color']; ?>" id="<?php echo htmlspecialchars($data['section_id']); ?>">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <!-- 区域标题 -->
        <div class="text-center max-w-3xl mx-auto mb-16">
            <?php if (!empty($data['section_pretitle'])): ?>
                <span class="inline-block text-sm font-semibold text-primary uppercase tracking-wider mb-2">
                    <?php echo htmlspecialchars($data['section_pretitle']); ?>
                </span>
            <?php endif; ?>
            
            <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
                <?php echo htmlspecialchars($data['section_title']); ?>
            </h2>
            
            <?php if (!empty($data['section_subtitle'])): ?>
                <p class="text-lg text-gray-600">
                    <?php echo htmlspecialchars($data['section_subtitle']); ?>
                </p>
            <?php endif; ?>
        </div>

        <!-- 团队成员容器 -->
        <div class="relative">
            <?php if ($data['layout'] === 'carousel'): ?>
                <!-- 轮播布局 -->
                <div class="team-carousel overflow-hidden">
                    <div class="flex transition-transform duration-500 ease-in-out" id="team-slider">
                        <?php foreach ($data['members'] as $member): ?>
                            <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 flex-shrink-0 px-4">
                                <?php $teamConfig = $data; include 'team-card.php'; ?>
                            </div>
                        <?php endforeach; ?>
                    </div>
                </div>
                
                <!-- 轮播导航按钮 -->
                <?php if (count($data['members']) > 4): ?>
                    <button id="prev-team" class="absolute top-1/2 left-0 -translate-y-1/2 -translate-x-1/2 md:translate-x-0 w-10 h-10 rounded-full bg-white shadow-md flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-primary z-10">
                        <i class="fa fa-chevron-left"></i>
                    </button>
                    <button id="next-team" class="absolute top-1/2 right-0 -translate-y-1/2 translate-x-1/2 md:translate-x-0 w-10 h-10 rounded-full bg-white shadow-md flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-primary z-10">
                        <i class="fa fa-chevron-right"></i>
                    </button>
                <?php endif; ?>
            <?php else: ?>
                <!-- 网格布局 -->
                <div class="grid <?php echo $columnClass; ?> gap-8">
                    <?php foreach ($data['members'] as $member): ?>
                        <?php $teamConfig = $data; include 'team-card.php'; ?>
                    <?php endforeach; ?>
                </div>
            <?php endif; ?>
        </div>
        
        <!-- 查看全部团队按钮 -->
        <?php if ($data['show_all_link'] && !empty($data['all_link_url'])): ?>
            <div class="text-center mt-12">
                <a href="<?php echo htmlspecialchars($data['all_link_url']); ?>" class="inline-flex items-center text-primary font-medium hover:text-primary/80 transition-colors duration-300 group">
                    <?php echo htmlspecialchars($data['all_link_text']); ?>
                    <i class="fa fa-arrow-right ml-2 text-sm transform group-hover:translate-x-1 transition-transform duration-300"></i>
                </a>
            </div>
        <?php endif; ?>
    </div>
</section>

<!-- 轮播功能脚本 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 轮播功能仅在布局为carousel时启用
    <?php if ($data['layout'] === 'carousel'): ?>
        const slider = document.getElementById('team-slider');
        const prevBtn = document.getElementById('prev-team');
        const nextBtn = document.getElementById('next-team');
        const slides = slider.children;
        const slideCount = slides.length;
        let currentIndex = 0;
        let slideWidth = 100; // 百分比
        
        // 根据屏幕尺寸调整可见幻灯片数量
        function updateSlideWidth() {
            if (window.innerWidth >= 1024) {
                slideWidth = 100 / 4; // 大屏幕显示4个
            } else if (window.innerWidth >= 768) {
                slideWidth = 100 / 3; // 中屏幕显示3个
            } else if (window.innerWidth >= 640) {
                slideWidth = 50; // 小屏幕显示2个
            } else {
                slideWidth = 100; // 超小屏幕显示1个
            }
            updateSliderPosition();
        }
        
        // 更新轮播位置
        function updateSliderPosition() {
            slider.style.transform = `translateX(-${currentIndex * slideWidth}%)`;
        }
        
        // 上一张
        function prevSlide() {
            currentIndex = Math.max(0, currentIndex - 1);
            updateSliderPosition();
        }
        
        // 下一张
        function nextSlide() {
            const maxIndex = window.innerWidth >= 1024 ? 
                slideCount - 4 : window.innerWidth >= 768 ? 
                slideCount - 3 : window.innerWidth >= 640 ?
                slideCount - 2 : slideCount - 1;
            currentIndex = Math.min(maxIndex, currentIndex + 1);
            updateSliderPosition();
        }
        
        // 绑定事件
        if (prevBtn) prevBtn.addEventListener('click', prevSlide);
        if (nextBtn) nextBtn.addEventListener('click', nextSlide);
        
        // 窗口大小变化时重新计算
        window.addEventListener('resize', updateSlideWidth);
        
        // 初始化
        updateSlideWidth();
    <?php endif; ?>
});
</script>
    